<!--
 * @Author: Administrator 742573123@qq.com
 * @Date: 2023-11-11 19:08:38
 * @LastEditors: Administrator 742573123@qq.com
 * @LastEditTime: 2023-11-13 00:07:46
 * @FilePath: \web\src\views\map\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="map">
    <div id="container" style="height:100%;"></div>
    <div class="btns">
      <el-dropdown @command="handleCommandAddDevice" style="margin-right:10px;">
        <el-button type="info">
          添加设备<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="ipc">视频</el-dropdown-item>
          <el-dropdown-item command="broadcast">广播</el-dropdown-item>
          <el-dropdown-item command="aiBox">AI盒子</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button type="info" @click="remove()">开启绘制</el-button>
      <el-button type="info" @click="mapaddEventListenerDisable()">删除</el-button>
      <el-button type="info" @click="openMove()">开启移动</el-button>
      <el-button type="info" @click="closeMove()">取消移动</el-button>
      
      <el-button type="info" @click="openDialog('open')">开启绘制</el-button>
      <el-button type="info" @click="openDialog('close')">禁用绘制</el-button>
      <el-button type="info" @click="openDialog('enableDragging')">开启拖拽</el-button>
      <el-button type="info" @click="openDialog('enableDragging')">禁用拖拽</el-button>
      <el-button type="info" @click="openDialog('remove')">清除</el-button>
    </div>
  </div>
</template>

<script>
import util from '@/libs/util.js';
export default {
  name: 'home',
  components: {
  },
  data() {
    return {
      // 地图
      map: null,
      // 鼠标左键和右键点击后保存的数据
      clickData: null,
      command: null,
    };
  },
  computed: {},

  mounted() {
    this.initMap()
    // // 鼠标绘制的管理类，用于管理全局的事件监听、覆盖物存取、获取当前交互对象等
    // // 在使用其他绘制功能前，需要先实例一个 DrawScene 类。
    // const scene = new DrawScene(map);
    // // 图标可视区域大小，填写文件分辨率即可
    // let size = new BMapGL.Size(106, 138)
    // // 偏移量，根据图标配置适应即可
    // let offset = { offset: new BMapGL.Size(20, 48) }
    // const myIcon = new BMapGL.Icon('/image/map/data-marker.png', size, offset)
    // // 设置图标大小，等同于css的backagroud-size属性
    // myIcon.setImageSize(new BMapGL.Size(40, 40))
    // this.marker = new MarkerDraw(scene, {
    //     id: 123456798,
    //     isOpen: true,
    //     isSeries: true,
    //     baseOpts: {
    //       icon: myIcon
    //     }
    // });
    // this.marker.close() // 关闭
    // // this.marker.open() // 打开鼠标点击添加点位
    // this.marker.addEventListener('click', e => {
    //   console.log(e);
    // })
  },
  methods: {
    initMap() {
      this.map = new BMapGL.Map("container");
      // 定位经纬度
      this.map.centerAndZoom(new BMapGL.Point(parseFloat(process.env.VUE_APP_BMAP_LAT), parseFloat(process.env.VUE_APP_BMAP_LNG)), parseInt(process.env.VUE_APP_BMAP_ZOOM));
      // 自定义主题
      this.map.setMapStyleV2({ styleId: process.env.VUE_APP_BMAP_MAP_STYLEV2 });
      // 开启鼠标滚轮放大缩小
      this.map.enableScrollWheelZoom();
      let _this = this
      // 鼠标左击事件
      this.map.addEventListener('click', function(e) {
        console.log('click', e);
        _this.clickData = e
        _this.mapEventHandle('click', e);
      });
      // 鼠标右击事件
      this.map.addEventListener('rightclick', function(e) {
        console.log('rightclick', e);
        _this.mapEvent('rightclick', e);
      });
    },
    // 添加设备
    handleCommandAddDevice(command) {
      this.command = command
      console.log(this.map);
      console.log('222', this.map);
      switch (command) {  
        case 'ipc':

          break;
        case 'broadcast':
          // 广播设备
          break;
        case 'aiBox':
          // ai盒子
          break;
      
        default:
          break;
      }
    },
    createDevice() {
      switch (this.command) {  
        case 'ipc':
          console.log('this.clickData', this.clickData);
          // 视频设备
          let point = new BMapGL.Point(this.clickData.latlng.lng, this.clickData.latlng.lat);
          let myIcon = new BMapGL.Icon('/image/map/data-marker.png', new BMapGL.Size(106, 138));
          // 设置图标大小，等同于css的backagroud-size属性
          myIcon.setImageSize(new BMapGL.Size(40, 40))
          // 需要指定大图的偏移位置，此做法与css sprites技术类似。 
          myIcon.setImageOffset(new BMapGL.Size(-33, -17))
          // 创建标注对象并添加到地图  
          let marker = new BMapGL.Marker(point, {icon: myIcon});
          marker.setLabel(new BMapGL.Label("标记点"))
          // 允许覆盖物在map.clearOverlays方法中被清除
          // marker.enableMassClear()
          // marker.disableMassClear()
          // 自定义数据
          marker.customData = {id: 123, name: '门口视频设备'}
          this.map.addOverlay(marker);
          // 获取地图已添加的 overlay 数据
          console.log(this.map.getOverlays());
          break;
        case 'broadcast':
          // 广播设备
          break;
        case 'aiBox':
          // ai盒子
          break;
        default:
          break;
      }
      this.command = null
      this.clickData = null
    },
    remove() {
      this.map.getOverlays()
      this.map.removeOverlay(this.map.getOverlays()[1])
    },
    openMove() {
      this.map.getOverlays()[1].enableDragging()
    },
    closeMove() {
      this.map.getOverlays()[1].disableDragging()
    },
    // map地图事件
    mapEventHandle(typeEvent) {
      switch (typeEvent) {
        case 'click':
            if (this.command) {
              this.createDevice()
            }
          break;
        case 'rightclick':
          break;
        default:
          break;
      }
    },
    // map地图的关闭事件
    mapaddEventListenerDisable(type) {
      switch (type) {
        case 'click':
          // 鼠标左击事件
          this.map.removeEventListener('click');
          break;
        case 'rightclick':
          // 鼠标右击事件
          this.map.removeEventListener('rightclick');
          break;
        default:
          this.map.removeEventListener('click');
          this.map.removeEventListener('rightclick');
          break;
      }
    },
    openDialog(type) {
      switch (type) {
        case 'add':
          // 添加设备
          this.marker.open(e => {
            console.log('开启绘制', e);
          })
          break;
        case 'open':
          // 开启绘制
          this.marker.open(e => {
            console.log('开启绘制', e);
          })
          break;
        case 'close':
          // 禁用绘制
          this.marker.close()
          break;
        case 'enableDragging':
          // 开启拖拽
          this.marker.enableDragging()
          break;
        case 'disableDragging':
          // 禁用拖拽
          this.marker.disableDragging()
          break;
      
        default:
          break;
      }
    },
  },
};
</script>

<style lang='scss' scoped>

.map{
  width: 100%;
  height: 100%;
  margin:0px;
  padding:0px;
  text-align: center;
  position: relative;

  .btns {
    background-color: beige;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999999999999;
  }
}
</style>